@import "../../colors.scss";
@import "../../styles.scss";

$cellSize: 15px;

//  _  _ ___ ___ _  _ _    ___ ___ _  _ _____ ___ _  _  ___
// | || |_ _/ __| || | |  |_ _/ __| || |_   _|_ _| \| |/ __|
// | __ || | (_ | __ | |__ | | (_ | __ | | |  | || .` | (_ |
// |_||_|___\___|_||_|____|___\___|_||_| |_| |___|_|\_|\___|




 //  __  __   _   ___ _  _   _____ _   ___ _    ___
 // |  \/  | /_\ |_ _| \| | |_   _/_\ | _ ) |  | __|
 // | |\/| |/ _ \ | || .` |   | |/ _ \| _ \ |__| _|
 // |_|  |_/_/ \_\___|_|\_|   |_/_/ \_\___/____|___|


// content of each tab
.matrices {
    overflow-x: scroll;
    min-height: 50vh;
    border: 1px solid $panel-dark;

    .spinner {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50vh;
        
        mat-progress-spinner circle {
            stroke: on-color-deemphasis(body);
        }
    }
    .matrices-columns {
        // white-space: nowrap;
        display: table;
        .matrix-column {
            display: table-cell;
            white-space: normal;
            // display: inline-block;
            padding: 10px;
            .matrix-name {
                text-align: center;
                padding-bottom: 5px;
                margin-bottom: 5px;
                font-size: 16px;
                border-bottom: 1px solid $panel-dark;
            }
            &+.matrix-column {
                border-left: 1px solid $panel-dark;
            }
        }
    }
}

.multiselect-dropdown{
    display: inline-block;
}

.colorpicker {
    width: ($cellSize + 5 + 2) * 4 !important; //override preset width
    align-items: center;
    text-align: center;
    .color-block {
        cursor: pointer;
        border: 1px solid black;
        margin: 2.5px;
        &.square {
            display: inline-block;
            width: $cellSize;
            height: $cellSize;
        }
        &.wide {
            display: block;
            height: $cellSize;
            font-size: 10pt;
            color: darken(white, 50%);
        }
    }
}

//color controls
$panel-light: lighten($panel-dark, 8%);
.colorSetup {
    font-size: 8pt;
    .colorpicker {
        width: 10ex;
    }
    .gradient-section-label {
        font-weight: bold;
        padding: 4px;
        text-align: center;
    }
    .gradient-section-content {
        border-top: 1px solid black;
        border-bottom: 1px solid black;
        text-align: left;
    }
    .display-buttons {
        // width: 183px;
        text-align: center;

        .squarebutton {
            border: 1px solid $panel-dark;
            padding: 4px 0;
            cursor: pointer;
            &:hover {
                background: $panel-light;
            }
            &.gradient:hover {
                text-decoration: underline; //since background color won't be seen on gradient buttons
            }
        }

        .presetsmenu {
            width: 90%;
            display: inline-block;
        }

    }
    .gradient-controls {
        // width: 200px;

        table {
            padding:0; margin:0;
            border-collapse: collapse;
            // select, button {
            //     font-family: 'Roboto Mono', monospace;
            //     font-size: 8pt;
            // }

            // border: 1px solid black;
            td {
                &.buttons>div {
                    // border: 1px solid black;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;

                }
                .left, .right { display: inline-block; }

                .left {
                    float: left
                }

                .right {
                    text-align: left;
                    select {
                        width: 80px;
                    }
                    // width: 100%;
                }

                &.col2 {
                    width: 45px;
                    input[type=number] {
                        // background-color: rgb(104, 60, 213);
                        width: 40px
                    }
                }
            }
            .minmax {
                text-align: center;
                background-color: $panel-light;
                // &.top { border-top: 1px solid black; border-bottom: 1px solid black}
                // &.bottom { border-top: 1px solid black}
            }
        }
        // button {background: red;}
        .addcolor {
            width: 100%;
            // background: red;
        }
    }
}

.select_behavior {
    padding: 5px;
    text-align: left;
}

.contextMenu-cover {
    // covers entire page
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    // background: rgba(0, 0, 0, 0.15);
}
.contextMenu-box {
    position: absolute;
    // background: white;
    &.left { right: 0 }
    border: 1px solid black;
    background-color: white;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
    position: absolute;
    z-index: 100; //draw on top of other controls
    width: max-content;

    .contextMenu-section {
        &:not(:first-child) {
            border-top: 1px solid $panel-dark;
            margin-top: 2px;
            padding-top: 2px;

        }
        .contextMenu-button {
            padding: 3px;
            cursor: pointer;
            &:hover {
                background: $cell-highlight-color;
            }
        }
    }

}

// .tooltip {
//     position: absolute;
//     z-index: 100; //draw on top of other controls

//     padding: 6px;
//     border-radius: 3px;
//     background: rgba(80, 80, 80, 0.75);

//     font-size: 8pt;
//     color: white;

//     max-width: 150px;
//     overflow-x: hidden;

//     .comment {
//         max-height: 300px;
//         overflow-y: hidden;
//     }

//     .comment-overflow-note {
//         // color: rgb(255, 199, 190);
//     }
//     .metadatalist {
//         margin: 0;
//         margin-top: 1px;
//         padding-left: 6px;
//         list-style: none;

//     }

// }

.mat-select{:focus {
    color: #63961C;
}}

.filters {
    padding: 4px;
    .filter {
        text-align: left;
        &:not(:first-child) {
            margin-top: 4px;
        }
        .filter-label {

        }
        .filter-option {
            &:hover {
                background: $cell-highlight-color;
            }
        }
    }
}

.multiselect {
    // padding: 4px;
    text-align: center;
    .multiselect-grouping {
        .multiselect-grouping-label {
            padding: 4px;
            font-weight: bold;
            // font-size: 14pt;
        }
        .multiselect-list {
            text-align: left;
            border-top: 1px solid black;
            border-bottom: 1px solid black;
            height: 200px;
            overflow-y: scroll;
            table {
                // table-layout:fixed; //fixes width
                border-collapse: collapse;
            }
            .multiselect-list-item {
                &:hover {
                    background: $cell-highlight-color;
                }
                .multiselect-list-item-label {
                    width: 25ex;
                }
                &.selected:not(:hover) {
                    background: $panel-dark;
                }
            }
        }
    }
}

.search {
    // padding: 4px;
    text-align: center;
    .search-list {
        margin-top:2px;
        text-align: left;
        border-top: 1px solid black;
        border-bottom: 1px solid black;
        height: 300px;
        overflow-y: scroll;
        table {
            // table-layout:fixed; //fixes width
            border-collapse: collapse;
            width: 325px;
        }
        .search-list-item {
            &:hover {
                background: $cell-highlight-color;
            }
            .search-list-item-label {
                width: 25ex;
            }
            &.selected:not(:hover) {
                background: $panel-dark;
            }
        }
    }
}

.search-button {
    &:hover {
        background: $cell-highlight-color;
    }
  }

.button {
    background-color: $panel-dark;
    border: none;
    padding: 4px 10px;
    text-align: center;
    //font-size: 16px;
    margin: 2px 1px;
    transition: 0.3s;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    &:hover {
        background-color: $button-dark;
    }
  }

.deselectNumber {
    font-size: 5pt;
    bottom: 2px;
    right: 4px;
    position: absolute;
    text-align: right;
}

.legend {
    position: fixed;
    bottom: 0;
    right: 0;
    width:300px;
    height:300px;
    background-color: white;
    border-left: 1px solid $panel-dark;
    .itemArea {
        position: static;
        overflow-y: scroll;
        margin-top:30px;
        height:270px;
        width:100%;
        overflow-x:hidden;
        .item {
            width:100%;
            height:40px;
            padding-left:5px;
            .label {
                margin-left:10px;
                width:150px;
            }

        }
        .even {
            background-color: $panel-light;
            width:100%;
            height:40px;
            .label {
                margin-left:10px;
                width:150px;
            }
        }
    }
}

.legendBar {
    position: fixed;
    bottom: 0;
    right: 0;
    width:300px;
    height:30px;
    background-color: $panel-dark;
    transition: 0.3s;
    &:hover {
        background: $cell-highlight-color;
        cursor: pointer;
    }
}

.layer_info {
    padding: 0 !important;
    box-sizing: border-box !important;
    width: 250px !important;
    .name_desc {
        padding: 0 10px;
    }
    .metadata_input {
        padding-left: 10px;
        // padding-bottom: 5px; 
        margin-bottom: 2px; //fix funky scroll overflow
        max-height: 50vh;
        overflow-y: auto;
        text-align: left;
        table {
            border-spacing: 5px 15px;
            // width: 500px;
            // padding: 0;
            // margin: 0;
            // list-style: none;
            .formfield-group {
                // &:not(:first-child) { margin-bottom: 5px; }
                td:first-child { border-width: 1px 0 1px 1px; border-color: black; border-style: solid; width: 5px}
                // border-left: 1px solid black;
                // padding-left: 5px;
                // &:not(:first-child) { margin-top: 10px;}
                button { margin-bottom: 4px; }
            }
        }
    }
}

.layout {
    width: 100px;
    text-align: left;
    select {
        width: 100%;
    }
    
    .section {
        padding: 10px;
        &+.section {
            border-top: 1px solid $panel-light;
        }
    }
}

